import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Col, Form, Input, message, Row, Spin } from 'antd';
import { Ref, useRef } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { invalidService } from '../services';
import { getTenantID } from '@/utils';
import { ILoadMapTypeAll } from '@/common';

export const WorkflowCancelModal: React.FC<WorkflowChedkRecordAPI.IWorkflowCancelModal> = ({
  onClose,
  reloadCallback,
  requestController,
  dataDetailInfo,
  cancelStateId,
}) => {
  /**
   * modal ref
   */
  const cancelModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (cancelModalRef) {
      if (cancelModalRef.current) {
        if (cancelModalRef.current.onModalCancel) {
          cancelModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 表单 form
   */
  const [workflowCancelForm] = Form.useForm();

  /**
   * 作废接口回调
   * @param res
   */
  const invalidCallBack = (res: any) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      onClose();
      reloadCallback();
      onCloseModal();
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入作废接口
   */
  const { invalidLoading, invalidRun } = invalidService(
    invalidCallBack,
    requestController,
  );

  /**
   * 保存
   */
  const onOkSave = () => {
    workflowCancelForm?.validateFields()?.then((values: any) => {
      const params: Record<string, any> = {
        ...values,
        id: dataDetailInfo.id,
        workflowID: dataDetailInfo.workflowID,
        oldState: dataDetailInfo.state,
        state: cancelStateId,
        paramObject: {
          procInstID: dataDetailInfo.workflowID,
          deleteReason: values.cancelReason,
          checkResult: `${getTenantID()}${
            ILoadMapTypeAll.ALLFLOW_CHECKRESULT
          }1004`,
        },
      };
      invalidRun(params);
    });
  };

  return (
    <OneModal
      open={true}
      // getContainer={false}
      ref={cancelModalRef}
      title={'流程作废'}
      width={document.body.clientWidth * 0.25}
      onCancel={onClose}
      bodyStyle={{
        padding: '5px 0px',
      }}
      centered
      onOk={onOkSave}
      confirmLoading={invalidLoading}
    >
      <Spin spinning={invalidLoading}>
        <div className={pageStyles['fromView-styles']}>
          <Form form={workflowCancelForm}>
            <Row>
              <Col span={24}>
                <Form.Item
                  label={'作废原因'}
                  name={'cancelReason'}
                  rules={[
                    {
                      required: true,
                      message: `请输入作废原因`,
                    },
                  ]}
                >
                  <Input.TextArea
                    placeholder={`请输入作废原因`}
                    showCount
                    maxLength={200}
                    autoSize={{ minRows: 3, maxRows: 5 }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </Spin>
    </OneModal>
  );
};
